<template>
  <div>
    <ul class="newsListBox">
      <li
        v-for="{ id, title, introduction, releaseTime } in listData"
        :key="id"
      >
        <div>
          <router-link class="active" :to="`/news_details/${id}`">{{
            title
          }}</router-link>
          <span>{{ moment(parseInt(releaseTime)).format("YYYY-MM-DD") }}</span>
        </div>
        <div>
          <p>{{ introduction }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["newsClass"],
  data() {
    return {
      listData: [],
    };
  },
  mounted() {
    this.getNewsListData();
  },
  methods: {
    getNewsListData() {
      let url = `news/list/${this.newsClass}`;
      console.log(url);
      this.axios.get(url).then(res => {
        console.log(res);
        this.listData = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.newsListBox {
  li {
    padding: 10px 16px;
    border-bottom: 1px solid #ccc;
    > div:first-child {
      span {
        text-align: right;
        display: block;
        font-size: 14px;
        line-height: 24px;
        color: #666;
      }
    }
    > div:nth-child(2) {
      margin: 4px 0;
      > p {
        margin: 0;
        color: #333;
      }
    }
    .active {
      color: #36c14c;
      font-size: 18px;
    }
  }
}
</style>
